<template>
  <div ref="editorElem" :class="{
    'plain-editor':plain,
  }"></div>
</template>
<script>

import Editor from 'wangeditor'
import H1 from './H1'
import H2 from './H2'
import hljs from 'highlight.js'
import 'highlight.js/styles/monokai-sublime.css'

export default {
  props: {
    modelValue: {
      type: String,
      default: ''
    },
    autofocus: {
      type: Boolean,
      default: false
    },
    plain: Boolean
  },
  data () {
    return {
      editor: null,
      pattern: 'preview'
    }
  },
  mounted () {
    const editor = this.editor = new Editor(this.$refs.editorElem)
    let menuKey = 'h1'
    editor.menus.extend(menuKey, H1)
    editor.config.menus = editor.config.menus.concat(menuKey)
    menuKey = 'h2'
    editor.menus.extend(menuKey, H2)
    editor.config.menus = editor.config.menus.concat(menuKey)
    // 配置菜单栏，删减菜单，调整顺序
    editor.config.menus = [
      'h1',
      'h2',
      // 'head',
      'bold',
      // 'fontSize',
      // 'fontName',
      // 'italic',
      // 'underline',
      // 'strikeThrough',
      // 'indent',
      // 'lineHeight',
      // 'foreColor',
      // 'backColor',
      // 'justify',
      'splitLine',
      'quote',
      'code',
      'link',
      // 'list',
      // 'todo',
      'emoticon',
      'image',
      'video',
      'table',
      'undo',
      'redo'
    ]
    // 配置全屏功能按钮是否展示
    editor.config.showFullScreen = false
    // 取消自动 focus
    editor.config.focus = this.autofocus
    // 菜单栏提示
    editor.config.showMenuTooltips = true
    // 菜单栏提示为上标（默认配置）
    editor.config.menuTooltipPosition = 'up'
    editor.config.lineHeights = ['1.5']
    // 关闭粘贴样式的过滤
    editor.config.pasteFilterStyle = true
    // 配置颜色（文字颜色、背景色）
    editor.config.colors = [
      '#ffffff',
      '#000000',
      '#eeece1',
      '#1f497d',
      '#4f81bd',
      '#c0504d',
      '#9bbb59',
      '#8064a2',
      '#4bacc6',
      '#f79646',
      '#f2f2f2',
      '#7f7f7f',
      '#ddd9c3',
      '#c6d9f0',
      '#dbe5f1',
      '#f2dcdb',
      '#ebf1dd',
      '#e5e0ec',
      '#dbeef3',
      '#fdeada'
    ]
    editor.config.fontSizes = {
      // 'x-small': { name: '10px', value: '1' },
      // small: { name: '13px', value: '2' },
      normal: {
        name: '16px',
        value: '3'
      }
      // large: { name: '18px', value: '4' },
      // 'x-large': { name: '24px', value: '5' },
      // 'xx-large': { name: '32px', value: '6' },
      // 'xxx-large': { name: '48px', value: '7' }
    }
    editor.highlight = hljs
    editor.config.withCredentials = true
    // 引入上传视频扩展插件
    editor.config.uploadVideoUrl = process.env.baseApi + '/v1/common-api/upload/editor/video'
    // this.uploadVideo(this, editor)
    editor.config.uploadImageUrl = process.env.baseApi + '/v1/common-api/upload/editor/image'
    // this.uploadImage(this, editor)
    editor.config.uploadImgServer = process.env.baseApi + '/v1/common-api/upload/editor/image'
    editor.config.uploadImgMaxLength = 1
    editor.config.zIndex = 1
    // 配置wangEditor的菜单栏不吸顶
    editor.config.menuFixed = true
    // 还可以修改历史记录的步数。默认 30 步
    editor.config.historyMaxSize = 100 // 修改为 100 步
    // 当我们使用兼容模式的时候，可以自定义记录的频率，默认 200 ms
    editor.config.onchangeTimeout = 500 // 修改为 2 s
    // 当光标从编辑框中移出时（失去焦点），把值传出来
    // editor.config.onblur = this.submitText
    editor.config.onchange = this.submitText
    editor.config.uploadImgUrl = '/fdp_api/upload/images'
    // 字体
    editor.config.familys = [
      '宋体'
    ]
    editor.create()
    editor.txt.html(this.modelValue)
  },
  unmounted () {
    this.editor.destroy()
    this.editor = null
  },
  methods: {
    submitText (newHtml) {
      if (newHtml.indexOf('<img ') > -1 && newHtml.indexOf('width="') > -1) {
        // TODO 图片样式
        // 暂时暴力处理下
        newHtml = newHtml.replace('width="30%"', 'style="width:30%;"')
            .replace('width="50%"', 'style="width:50%;"')
      }
      this.$emit('update:modelValue', newHtml)
    }
  }
}

</script>

<style lang="scss">
.w-e-text {
  font-family: PingFang SC, Microsoft YaHei, -apple-system, BlinkMacSystemFont, Helvetica Neue, Source Han Sans SC, Noto Sans CJK SC, WenQuanYi Micro Hei, sans-serif !important;
  overflow: auto !important;
  word-break: break-all;
  font-weight: 400;
  color: #121212;

  p {
    margin: 0 0 22px 0;
    padding: 0;
  }

  h1 {
    clear: left;
    margin-top: 22px;
    margin-bottom: 22px;
    font-size: 20px !important;
    line-height: 1.5;
    font-weight: 800;
    font-synthesis: style;
  }

  h2 {
    clear: left;
    margin-top: 22px;
    margin-bottom: 22px;
    font-size: 18px !important;
    line-height: 1.5;
    font-weight: 600;
    font-synthesis: style;
  }

  a, a:visited, a:hover, a:active, a:focus {
    color: #131313;
    text-decoration: none;
    background-color: white !important;
    border-bottom: 1px solid rgba(#808080, 0.8);
  }

  img, figure {
    text-align: center;
  }

  pre {
    margin: 1.4em 0;
    padding: 10px;
    background: #f6f6f6;
    border-radius: 4px;
    white-space: pre-wrap;
    word-wrap: break-word;

    code, p {
      margin: 0;
      padding: 0;
      font-size: 13px;
    }
  }
}

.w-e-menu {
  color: #999;
}

.w-e-toolbar {
  // 不要边框
  border: none !important;
  margin-left: 0 !important;
  padding-left: 0 !important;
  // width: 50%;
  // position: fixed !important;
}

.plain-editor {
  .w-e-text-container {
    // 不要边框
    height: 600px !important;
    // font-size: 16px !important;
    // clear: both;
  }
}

.w-e-text-container {
  // 不要边框
  border: none !important;
}

.toolbar {
  border-top: rgba($color: #000000, $alpha: 0.12) 1px solid;
  margin: 15px 0 0 0;
}

</style>
